<template>
  <a-drawer
    :bodyStyle="{backgroundColor:'#f0f2f5'}"
    :closable="false"
    :visible="openView"
    placement="right"
    width="100%"
    @close="onCloseView">

    <a-tabs
      v-model="activeKey"
      default-active-key="1"
      class="city-tabs"
      :animated="true"
      @change="tabClickPane">
      <a-tab-pane key="1" tab="城市概况" force-render>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-card
              :bodyStyle="{height:'450px'}"
              :bordered="true"
              :hoverable="true"
              :loading="loading"
              extra="100% 数据精准度"
              placement="right">
              <div slot="title">
                <a-icon type="tags" theme="filled" style="color: #1890ff"/>
                城市概况
              </div>
              <a-descriptions :column="2" bordered>
                <a-descriptions-item :span="2">
                  <div slot="label" style="text-align: left">
                    <a-badge status="processing" text="城市名称" />
                  </div>
                  {{ form.cityName }}
                </a-descriptions-item>
                <a-descriptions-item>
                  <div slot="label" style="text-align: left">
                    <a-badge status="processing" text="城市等级" />
                  </div>
                  {{ cityLevelFormat(form.cityLevel) }}
                </a-descriptions-item>
                <a-descriptions-item :column="2">
                  <div slot="label" style="text-align: left">
                    <a-badge status="processing" text="城市线级" />
                  </div>
                  {{ linesLevelFormat(form.linesLevel) }}
                </a-descriptions-item>
                <a-descriptions-item :span="2">
                  <div slot="label" style="text-align: left">
                    <a-badge status="processing" text="常住人口（七普）" />
                  </div>
                  {{ form.totalResidentPopulation }} 万人
                  <a-tag class="ant-calendar-range-right" color="blue">
                    全国排名{{ form.totalResidentPopulationRanking }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item :span="2">
                  <div slot="label" style="text-align: left">
                    <a-badge status="processing" text="新增人口（七普）" />
                  </div>
                  {{ form.newResidentPopulation }} 万人
                </a-descriptions-item>
                <a-descriptions-item :span="2">
                  <div slot="label" style="text-align: left">
                    <a-badge status="processing" text="户籍人口" />
                  </div>
                  {{ form.totalRegisteredPopulation }} 万人
                  <a-tag class="ant-calendar-range-right" color="blue">
                    全国排名{{ form.totalRegisteredPopulationRanking }}
                  </a-tag>
                </a-descriptions-item>
                <a-descriptions-item :span="2">
                  <div slot="label" style="text-align: left">
                    <a-badge status="processing" text="家庭户数（七普）" />
                  </div>
                  {{ form.familyNumber }} 万人
                </a-descriptions-item>
                <a-descriptions-item :span="2">
                  <div slot="label" style="text-align: left">
                    <a-badge status="processing" text="城市面积" />
                  </div>
                  {{ form.cityArea }} km²
                  <a-tag class="ant-calendar-range-right" color="blue">
                    全国排名{{ form.cityAreaRanking }}
                  </a-tag>
                </a-descriptions-item>
              </a-descriptions>
            </a-card>
          </a-col>
          <a-col :span="16">
            <a-card
              :bodyStyle="{height:'450px'}"
              :bordered="true"
              :hoverable="true"
              :loading="loading">
              <div slot="title">
                <a-icon type="tags" theme="filled" style="color: #1890ff"/>
                经济概况
                &nbsp;
                <a-popover title="经济指标数据说明" trigger="hover" placement="topLeft">
                  <template
                    slot="content">
                    <p>消费活跃度:
                      <br/>
                      数据统计时间截至2020年3月；结合外卖活跃度、网
                      <br/>
                      购活跃度、海淘活跃度综合计算，进行全国性评估，
                      <br/>
                      量化为指数呈现。
                    </p>
                    <p>消费多样性:
                      <br/>
                      数据统计时间截至2020年3月；结合京东图书销售额
                      <br/>
                      占比、淘宝天猫消费多样性、电影消费指数综合计算，
                      <br/>
                      进行全国性评估，量化为指数呈现。
                    </p>
                  </template>
                  <a-icon type="question-circle-o"/>
                </a-popover>
              </div>
              <div slot="extra">
                消费评估 &nbsp;
                <a-tag class="ant-calendar-range-right" color="blue">
                  {{ form.consumerEvaluation }}
                </a-tag>
              </div>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-descriptions :column="1" bordered>
                    <a-descriptions-item>
                      <div slot="label" style="text-align: left">
                        <a-badge status="processing" text="城市GDP" />
                      </div>
                      <span v-if="form.cityGdp">
                        {{ form.cityGdp }} 万元
                        <a-tag class="ant-calendar-range-right" color="blue">
                          全国排名{{ form.cityGdpRanking }}
                        </a-tag>
                      </span>
                      <span v-else>-</span>
                    </a-descriptions-item>
                    <a-descriptions-item>
                      <div slot="label" style="text-align: left">
                        <a-badge status="processing" text="城市GDP增速" />
                      </div>
                      <span v-if="form.cityGdpRate">{{ form.cityGdpRate }} %</span>
                      <span v-else>-</span>
                    </a-descriptions-item>
                    <a-descriptions-item>
                      <div slot="label" style="text-align: left">
                        <a-badge status="processing" text="人均GDP" />
                      </div>
                      <span v-if="form.peopleAreGdp">
                        {{ form.peopleAreGdp }} 元
                        <a-tag class="ant-calendar-range-right" color="blue">
                          全国排名{{ form.peopleAreGdpRanking }}
                        </a-tag>
                      </span>
                      <span v-else>-</span>
                    </a-descriptions-item>
                    <a-descriptions-item>
                      <div slot="label" style="text-align: left">
                        <a-badge status="processing" text="人均消费支出" />
                      </div>
                      <span v-if="form.peopleAreConsumer">
                        {{ form.peopleAreConsumer }} 元
                        <a-tag class="ant-calendar-range-right" color="blue">
                          全国排名{{ form.peopleAreConsumerRanking }}
                        </a-tag>
                      </span>
                      <span v-else>-</span>
                    </a-descriptions-item>
                    <a-descriptions-item>
                      <div slot="label" style="text-align: left">
                        <a-badge status="processing" text="人均可支配收入" />
                      </div>
                      <span v-if="form.peopleAreDominant">
                        {{ form.peopleAreDominant }} 元
                        <a-tag class="ant-calendar-range-right" color="blue">
                          全国排名{{ form.peopleAreDominantRanking }}
                        </a-tag>
                      </span>
                      <span v-else>-</span>
                    </a-descriptions-item>
                    <a-descriptions-item>
                      <div slot="label" style="text-align: left">
                        <a-badge status="processing" text="人均月薪资" />
                      </div>
                      <span v-if="form.peopleAreWage">
                        {{ form.peopleAreWage }} 元
                        <a-tag class="ant-calendar-range-right" color="blue">
                          全国排名{{ form.peopleAreWageRanking }}
                        </a-tag>
                      </span>
                      <span v-else>-</span>
                    </a-descriptions-item>
                    <a-descriptions-item>
                      <div slot="label" style="text-align: left">
                        <a-badge status="processing" text="社会消费品零售总额" />
                      </div>
                      <span v-if="form.retailAmount">
                        {{ form.retailAmount }} 亿元
                        <a-tag class="ant-calendar-range-right" color="blue">
                          全国排名{{ form.retailAmountRanking }}
                        </a-tag>
                      </span>
                      <span v-else>-</span>
                    </a-descriptions-item>
                  </a-descriptions>
                </a-col>

                <a-col :span="12">
                  <a-row :gutter="24">
                    <a-col :span="24">
                      <div id="economicStats" ref="economicStats" style="height: 350px" />
                    </a-col>
                  </a-row>
                  <a-row :gutter="24">
                    <a-col :span="9">
                      <a-badge status="processing" />
                      消费活跃度
                      <span v-if="form.consumerActiveRanking">
                        <a-tag class="ant-calendar-range-right" color="blue">
                          全国排名{{ form.consumerActiveRanking }}
                        </a-tag>
                      </span>
                      <span v-else>-</span>
                    </a-col>
                    <a-col :span="6" />
                    <a-col :span="9">
                      <a-badge status="processing" />
                      消费多样性
                      <a-tag class="ant-calendar-range-right" color="blue">
                        全国排名2
                      </a-tag>
                    </a-col>
                  </a-row>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
        </a-row>
        <br>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-card
              :bodyStyle="{textAlign: 'center', height: '400px'}"
              :bordered="true"
              :hoverable="true"
              :loading="loading"
              extra="95% 数据精准度">
              <div slot="title">
                <a-icon type="tags" theme="filled" style="color: #1890ff"/>
                交通概况
                &nbsp;
                <a-popover title="交通概况数据说明" trigger="hover" placement="topLeft">
                  <template
                    slot="content">
                    <p>高铁可直达城市数:
                      <br/>
                      数据统计时间截至2019年8月当月数据。
                    </p>
                    <p>高铁城际往来班次联系度:
                      <br/>
                      数据统计时间截至2019年8月当月数据；高铁城际往
                      <br/>
                      来班次联系度以城市对之间的高铁班次为节点权重计算
                      <br/>
                      其复杂网络中心度。
                    </p>
                    <p>公里3小时可直达城市数:
                      <br/>
                      数据统计时间截至2020年3月。
                    </p>
                  </template>
                  <a-icon type="question-circle-o"/>
                </a-popover>
              </div>
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-card-meta description="地铁线路">
                    <div slot="title">
                      <icon-font :style="{fontSize: '24px'}" type="icon-zcnditiepiao" />
                        &nbsp;
                      <span v-if="form.subway">{{ form.subway }}</span>
                      <span v-else>0</span>
                    </div>
                  </a-card-meta>
                </a-col>
                <a-col :span="8">
                  <a-card-meta description="火车站">
                    <div slot="title">
                      <icon-font :style="{fontSize: '24px'}" type="icon-zcnhuochepiao1" />
                        &nbsp;
                      <span v-if="form.train">{{ form.train }}</span>
                      <span v-else>0</span>
                    </div>
                  </a-card-meta>
                </a-col>
                <a-col :span="8">
                  <a-card-meta description="机场">
                    <div slot="title">
                      <icon-font :style="{fontSize: '24px'}" type="icon-zcnfeiji1" />
                        &nbsp;
                      <span v-if="form.airport">{{ form.airport }}</span>
                      <span v-else>0</span>
                    </div>
                  </a-card-meta>
                </a-col>
              </a-row>
              <br />
              <a-row :gutter="24">
                <a-col :span="24">
                  <a-descriptions :column="1" bordered>
                    <a-descriptions-item>
                      <div slot="label" style="text-align: left">
                        <a-badge status="processing" text="高铁可直达城市数" />
                      </div>
                      <span v-if="form.trainDirect">{{ form.trainDirect }}</span>
                      <span v-else>-</span>
                    </a-descriptions-item>
                    <a-descriptions-item>
                      <div slot="label" style="text-align: left">
                        <a-badge status="processing" text="高铁城际往来班次联系度" />
                      </div>
                      <span v-if="form.trainShift">{{ form.trainShift }}</span>
                      <span v-else>-</span>
                    </a-descriptions-item>
                    <a-descriptions-item>
                      <div slot="label" style="text-align: left">
                        <a-badge status="processing" text="公路3小时可直达城市数" />
                      </div>
                      <span v-if="form.highwayDirect">{{ form.highwayDirect }}</span>
                      <span v-else>-</span>
                    </a-descriptions-item>
                  </a-descriptions>
                  <br />
                  <a-alert
                    description="以上数据均为数据分析计算后指数呈现结果，数据值仅供参考"
                    message="交通概况数据说明"
                    type="info"
                  />
                </a-col>
              </a-row>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card
              :bodyStyle="{textAlign: 'center', height: '400px'}"
              :bordered="true"
              :hoverable="true"
              :loading="loading">
              <div slot="title">
                <a-icon type="tags" theme="filled" style="color: #1890ff"/>
                旅游概况
              </div>
              <div slot="extra">
                旅游人次总和 &nbsp;
                <a-tag class="ant-calendar-range-right" color="blue">
                  全国排名{{ form.tourismRanking }}
                </a-tag>
              </div>
              <a-row :gutter="24">
                <a-col :span="24">
                  <template v-for="(tag) in tags">
                    <a-tag :key="tag">
                      {{ tag }}
                    </a-tag>
                  </template>
                </a-col>
              </a-row>
              <br />
              <a-row :gutter="24">
                <a-col :span="24">
                  <div id="tourismStats" ref="tourismStats" style="height: 320px" />
                </a-col>
              </a-row>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card
              :bodyStyle="{height: '400px'}"
              :bordered="true"
              :hoverable="true"
              :loading="loading">
              <div slot="title">
                <a-icon type="tags" theme="filled" style="color: #1890ff"/>
                价值评估
                &nbsp;
                <a-popover title="价值评估数据说明" trigger="hover" placement="topLeft">
                  <template
                    slot="content">
                    <p>经济规模指数:
                      <br/>
                      基于全国GDP进行全国性评估，量化为指数呈现。
                    </p>
                    <p>消费活跃指数:
                      <br/>
                      基于本城市外卖活跃度、网购活跃度、海淘活跃度
                      <br/>
                      综合计算，同时进行全国性评估，量化为指数呈现。
                    </p>
                    <p>交通便利指数:
                      <br/>
                      基于本城市高铁可直达城市数量以及该城市的高铁城际
                      <br/>
                      往来班次联系杜进行全国性评估，量化为指数呈现。
                    </p>
                    <p>人口规模指数:
                      <br/>
                      基于城市常住人口数据进行全国性评估，量化为指数呈现。
                    </p>
                    <p>商业集聚度指数:
                      <br/>
                      集合商业核心数据、基础商业指数、大品牌分布青睐指数综合计算。
                    </p>
                  </template>
                  <a-icon type="question-circle-o"/>
                </a-popover>
              </div>
              <div slot="extra">
                综合评分 &nbsp;
                <a-tag class="ant-calendar-range-right" color="blue">
                  {{ (this.consumptionScore).toFixed(2) }} 分
                </a-tag>
              </div>
              <div id="consumptionStats" ref="consumptionStats" style="height: 350px" />
            </a-card>
          </a-col>
        </a-row>
      </a-tab-pane>

      <a-tab-pane key="2" force-render tab="商圈概况">
        <a-tabs
          v-if="areaList && areaList.length > 0"
          tabPosition="left"
          default-active-key="0"
          :tab-bar-style="{height: '800px'}"
          @change="clickPane">
          <a-tab-pane v-for="(d,index) in areaList" :key="index" :tab="d.areaName">
            <view-area-form
              ref="viewAreaForm"
              :areaForm="areaList[index]"
            />
          </a-tab-pane>
        </a-tabs>
        <a-card
          v-else
          :bodyStyle="{height:'850px'}"
          :bordered="true"
          :hoverable="true"
          :loading="loading"
          placement="right">
          <a-list style="padding-top: 300px" :data-source="[]" />
        </a-card>
      </a-tab-pane>
    </a-tabs>
    <br />
    <div class="bottom-control">
      <a-space>
        <a-button type="dashed" @click="cancel">
          关闭
        </a-button>
      </a-space>
    </div>

  </a-drawer>
</template>

<script>

import { getCity } from '@/api/platform/city'
import * as echarts from 'echarts'
import { divSizeChange } from '@/utils/util'
import { Icon } from 'ant-design-vue'
import ViewAreaForm from './ViewAreaForm'

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_3189149_29g2jwbpiu1.js'
})

export default {
  name: 'ViewForm',
  components: {
    ViewAreaForm,
    IconFont
  },
  props: {
    // 城市名称字典
    cityLevelOptions: {
      type: Array,
      required: true
    },
    // 城市线级字典
    linesLevelOptions: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      // 面板选中值
      activeKey: '1',
      // 加载动画
      loading: false,
      // 表单标题
      formTitle: '',
      // 经济统计数据
      economicEcharts: null,
      // 经济数据
      economicData: [],
      // 消费统计数据
      consumptionEcharts: null,
      // 综合数据
      consumptionData: [],
      // 综合评分
      consumptionScore: 0,
      // 旅游统计数据
      tourismEcharts: null,
      // 旅游数据
      tourismData: [],
      // 城市标签
      tags: [],
      // 商圈列表
      areaList: [],
      // 商圈面板选中
      areaActive: 0,
      // 表单参数
      form: {
        cityId: undefined,
        userId: undefined,
        deptId: undefined,
        cityName: undefined,
        cityLevel: undefined,
        linesLevel: undefined,
        totalResidentPopulation: undefined,
        totalResidentPopulationRanking: undefined,
        newResidentPopulation: undefined,
        totalRegisteredPopulation: undefined,
        totalRegisteredPopulationRanking: undefined,
        familyNumber: undefined,
        cityArea: undefined,
        cityAreaRanking: undefined,
        cityGdp: undefined,
        cityGdpRanking: undefined,
        cityGdpRate: undefined,
        consumerEvaluation: undefined,
        peopleAreGdp: undefined,
        peopleAreGdpRanking: undefined,
        peopleAreConsumer: undefined,
        peopleAreConsumerRanking: undefined,
        peopleAreDominant: undefined,
        peopleAreDominantRanking: undefined,
        peopleAreWage: undefined,
        peopleAreWageRanking: undefined,
        retailAmount: undefined,
        retailAmountRanking: undefined,
        consumerActive: undefined,
        consumerActiveRanking: undefined,
        consumerDiversity: undefined,
        consumerDiversityRanking: undefined,
        subway: undefined,
        train: undefined,
        airport: undefined,
        trainDirect: undefined,
        trainShift: undefined,
        highwayDirect: undefined,
        cityTag: undefined,
        domesticTourism: undefined,
        entryTourism: undefined,
        tourismRanking: undefined,
        economicIndicators: undefined,
        consumerIndicators: undefined,
        populationIndicators: undefined,
        businessIndicators: undefined,
        trafficIndicators: undefined,
        dataTime: undefined,
        remark: undefined
      },
      openView: false
    }
  },
  filters: {},
  created () {

  },
  mounted () {
    // 大小自适应
    const ary = ['economicStats', 'consumptionStats', 'tourismStats']
    divSizeChange('ant-card-body', this, ary)
  },
  computed: {},
  watch: {},
  methods: {
    // 城市级别格式化
    cityLevelFormat (val) {
      return this.selectDictLabel(this.cityLevelOptions, val)
    },
    // 城市线级格式化
    linesLevelFormat (val) {
      return this.selectDictLabel(this.linesLevelOptions, val)
    },
    /** 根据id查询数据 */
    handleView (row) {
      this.areaList = null
      getCity(row.cityId).then(response => {
        this.form = response.data
        this.areaList = response.data.areas

        this.activeKey = '1'

        this.economicData = []
        this.economicData.push({ value: this.form.peopleAreGdp ? this.form.peopleAreGdp : 0, name: '人均GDP' })
        this.economicData.push({ value: this.form.peopleAreWage ? this.form.peopleAreWage : 0, name: '人均月薪资' })
        this.economicData.push({ value: this.form.peopleAreConsumer ? this.form.peopleAreConsumer : 0, name: '人均消费支出' })
        this.economicData.push({
          value: this.form.peopleAreDominant ? this.form.peopleAreDominant : 0,
          name: '人均可支配收入'
        })

        this.tags = []
        if (this.form.cityTag) {
          this.tags = this.form.cityTag.split(/[,，]/)
        }

        this.tourismData = []
        this.tourismData.push({ value: this.form.domesticTourism ? this.form.domesticTourism : 0, name: '国内旅游者' })
        this.tourismData.push({ value: this.form.entryTourism ? this.form.entryTourism : 0, name: '入境旅游者' })

        this.consumptionData = []
        this.consumptionData.push(this.form.economicIndicators ? this.form.economicIndicators : 0)
        this.consumptionData.push(this.form.trafficIndicators ? this.form.trafficIndicators : 0)
        this.consumptionData.push(this.form.businessIndicators ? this.form.businessIndicators : 0)
        this.consumptionData.push(this.form.populationIndicators ? this.form.populationIndicators : 0)
        this.consumptionData.push(this.form.consumerIndicators ? this.form.consumerIndicators : 0)

        let countScore = 0
        this.consumptionData.forEach(cd => {
          countScore += cd
        })

        if (countScore > 0) {
          this.consumptionScore = countScore / 5
        }

        this.handlePane1()
        this.openView = true
      })
    },
    // 关闭弹框
    onCloseView () {
      this.openView = false
    },
    // 取消按钮
    cancel () {
      this.openView = false
    },
    // 城市面板
    handlePane1 () {
      setTimeout(() => {
        // 经济数据
        if (this.economicEcharts) {
          // 销毁
          this.economicEcharts.dispose()
        }
        this.economicEcharts = echarts.init(this.$refs.economicStats, 'macarons')
        this.economicEcharts.clear()
        this.economicEcharts.resize()
        this.economicEcharts.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            data: [
              '人均GDP',
              '人均月薪资',
              '人均消费支出',
              '人均可支配收入'
            ]
          },
          series: [
            {
              name: '经济分析',
              type: 'pie',
              radius: ['40%', '75%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                normal: {
                  show: true,
                  formatter: '{b}: {d}%' // 这里是数据展示的时候显示的数据
                }
              },
              data: this.economicData
            }
          ]
        })

        // 消费数据
        if (this.consumptionEcharts) {
          // 销毁
          this.consumptionEcharts.dispose()
        }
        this.consumptionEcharts = echarts.init(this.$refs.consumptionStats, 'macarons')
        this.consumptionEcharts.clear()
        this.consumptionEcharts.resize()
        this.consumptionEcharts.setOption({
          tooltip: {
            trigger: 'axis'
          },
          legend: {},
          radar: [
            {
              indicator: [
                { text: '经济规模指数' },
                { text: '交通便利指数' },
                { text: '商业集聚指数' },
                { text: '人口规模指数' },
                { text: '消费活跃指数' }
              ],
              center: ['50%', '60%'],
              radius: 120,
              startAngle: 90,
              splitNumber: 4,
              shape: 'circle',
              axisName: {
                show: true,
                fontWeight: 'bold',
                fontSize: '14'
              }
            }
          ],
          series: [
            {
              type: 'radar',
              tooltip: {
                trigger: 'item'
              },
              emphasis: {
                lineStyle: {
                  width: 4
                }
              },
              data: [
                {
                  value: this.consumptionData,
                  name: '价值评估',
                  symbol: 'rect',
                  symbolSize: 12,

                  label: {
                    show: true,
                    formatter: function (params) {
                      return params.value
                    }
                  }
                }
              ]
            }
          ]
        })

        // 旅游数据
        if (this.tourismEcharts) {
          // 销毁
          this.tourismEcharts.dispose()
        }
        this.tourismEcharts = echarts.init(this.$refs.tourismStats, 'macarons')
        this.tourismEcharts.clear()
        this.tourismEcharts.resize()
        this.tourismEcharts.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            data: [
              '国内旅游者',
              '入境旅游者'
            ]
          },
          series: [
            {
              name: '旅游数据',
              type: 'pie',
              radius: ['40%', '75%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                normal: {
                  show: true,
                  formatter: '{b}: {d}%' // 这里是数据展示的时候显示的数据
                }
              },
              data: this.tourismData
            }
          ]
        })
      }, 100)
    },
    // 面板点击事件
    tabClickPane (key) {
      if (key === '1') {
        this.handlePane1()
      } else {
        if (this.$refs.viewAreaForm) {
          if (this.$refs.viewAreaForm[this.areaActive]) {
            this.$refs.viewAreaForm[this.areaActive].refreshData()
          }
        }
      }
    },
    // 商圈点击事件
    clickPane (key) {
      this.areaActive = key
      if (this.$refs.viewAreaForm[key]) {
        this.$refs.viewAreaForm[key].refreshData()
      }
    }
  }
}
</script>
<style>
  .city-tabs{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
</style>
